<template>
    <view class="wrap">
        <!-- 选择景点 -->
        <Authorize @authorizeSuccess="authorizeSuccess('choosePoint')">
            <ChooseMerchant
                :merchantList="allMerchant"
                :showSelectMerchant="showSelectMerchant"
                :currentMerchantId="vuex_merchantId"
                :currentMerchantName="vuex_merchantName"
                @merchantChange="merchantChange"
            ></ChooseMerchant>
        </Authorize>
        <!-- 图片背景 -->
        <view class="imgBg" :class="[isIPhone ? 'iphoneStye' : '']"><image src="@/static/tabBar/index/phonebg.png" mode="" class="phonebg"></image></view>
        <!-- 刷脸取片 -->
        <Authorize @authorizeSuccess="authorizeSuccess('takePhotos')"><view class="upBtn" @click="throttleFacePick">刷脸取片</view></Authorize>
    </view>
</template>

<script>
import ChooseMerchant from './components/ChooseMerchant';
import Authorize from '@/components/Authorize/Authorize.vue';
import { getAllMerchant, getCurrMerchant } from '@/api/index.js';
export default {
    data() {
        return {
            isIPhone: false,
            addItemContent: '',
            allMerchant: [],
            showSelectMerchant: false, //是否显示选择商家的页面
            token: ''
        };
    },
    onShow() {
        this.$u.vuex('vuex_enterFacePageTimes', 0);
        this.token = this.$storage.getStorage(this.$config.tokenKey);
        if (this.token && this.allMerchant.length <= 0) {
            this.authorizeSuccess();
        }
    },
    async mounted() {
        const systemInfo = await this.$uniPromise.getSystemInfo();
        if (systemInfo.screenHeight > 800) {
            this.isIPhone = true;
        }
    },
    created() {},
    methods: {
        // 点击选择景点授权成功
        authorizeSuccess(type) {
            this.token = this.$storage.getStorage(this.$config.tokenKey);
            if (this.allMerchant.length <= 0) {
                getAllMerchant()
                    .then(data => {
                        if (data.length > 0) {
                            this.allMerchant = data;
                            return getCurrMerchant();
                        }
                    })
                    .then(data => {
                        let defaultPoint = data[0] || {};
                        if (defaultPoint && defaultPoint.id && this.vuex_merchantId !== defaultPoint.id) {
                            this.showDefaultPointTip(defaultPoint);
                        } else {
                            if (type === 'choosePoint') {
                                this.showSelectMerchant = true;
                            }
                            if (type === 'takePhotos') {
                                this.throttleFacePick();
                            }
                        }
                    });
            }
        },
        // 选择默认景点提示
        async showDefaultPointTip(defaultPoint) {
            let res = await this.$uniPromise.showModal({
                title: '提示',
                content: `是否为您自动切换至${defaultPoint.name}景区`
            });
            if (res.confirm) {
                this.setScenicspotStorage(defaultPoint);
            }
        },
        // 节流处理
        throttleFacePick() {
            this.$u.throttle(this.gotoFacePick, 600);
        },
        // 去刷脸去照片页面
        async gotoFacePick() {
            if (this.vuex_merchantId && this.vuex_merchantName) {
                this.sendMessage();
            } else {
                let res = await this.$uniPromise.showModal({
                    title: '提示',
                    content: `请先选择景点，我们将为您提供精准查找`
                });
                if (res.confirm) {
                    this.showSelectMerchant = true;
                }
            }
        },
        // 选择了景点
        merchantChange(item) {
            this.setScenicspotStorage(item);
        },
        // 设置景区景点的缓存
        setScenicspotStorage(merchantInfo) {
            this.$u.vuex('vuex_merchantId', merchantInfo.id);
            this.$u.vuex('vuex_merchantName', merchantInfo.name);
            this.$u.vuex('vuex_userId', merchantInfo.userid);
            this.$u.vuex('vuex_merchantMode', merchantInfo.temp_code);
        },
        // 订阅消息
        async sendMessage() {
            if (!this.vuex_subscribeMessage && typeof wx.requestSubscribeMessage === 'function') {
                try{
                    const subscribeMessage = await this.$uniPromise.requestSubscribeMessage(this.$config.tmplIds);
                    if (subscribeMessage[this.$config.tmplIds] === 'accept') {
                        this.$u.vuex('vuex_subscribeMessage', true);
                    }
                }catch(err){
                    console.log(err);
                    this.scopeCamera();
                }
            }
            this.scopeCamera();
        },
        // 授权拍照技术
        async scopeCamera() {
            console.log('kkkk');
            const setting = await this.$uniPromise.getSetting();
            if (setting && setting.authSetting['scope.camera'] === false) {
                let res = await this.$uniPromise.showModal({
                    title: '摄像头未授权',
                    content: `如需使用刷脸取片，请允许“云游乐拍”使用您的摄像头`
                });
                if (res.confirm) {
                    this.$uniPromise.openSetting();
                }
            } else {
                uni.navigateTo({
                    url: '/pages/indexPages/facePicking/facePicking'
                });
            }
        }
    },
    components: {
        ChooseMerchant,
        Authorize
    }
};
</script>

<style lang="less" scoped>
.wrap {
    width: 100%;
    text-align: center;
    border: none;
    .imgBg {
        width: 750rpx;
        height: 568rpx;
        margin-top: 60rpx;

        .phonebg {
            width: 100%;
            height: 100%;
        }
    }

    .iphoneStye {
        margin-top: 160rpx;
    }

    .tit {
        line-height: 32rpx;
        font-size: 32rpx;
        margin-top: 68rpx;
        color: #262832;
    }

    .upBtn {
        width: 600rpx;
        height: 86rpx;
        margin-top: 100rpx;
        margin-left: 75rpx;
        line-height: 86rpx;
        color: #ffffff;
        background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
        border-radius: 10rpx;
    }

    .takeBtn {
        width: 598rpx;
        height: 86rpx;
        margin: 40rpx 0 0rpx 75rpx;
        line-height: 86rpx;
        letter-spacing: 2rpx;
        color: #47c649;
        border: 1px solid #47c649;
        border-radius: 10rpx;
    }

    .bindBtn {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: transparent;
        border: none;
        outline: none;
        margin: 0;
        padding: 0;
    }
}
</style>
